<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直对齐方式</title>
    <style>
        div{
            border: 1px solid #000;
        }
        img{
            /* 居中 */
            /* vertical-align: middle; */
            /* 顶对齐：最高内容的顶部 */
            /* vertical-align: top; */
            /* 底对齐：最高内容的底部 */
            /* vertical-align: bottom; */

            /* 因为浏览器把行内块 行内标签当文字处理，默认按基线处理 */
            /* 效果：图片img 的底部有空白，转块级就不按基线处理 空白就消失了     */
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <img src="./imges/1.webp" alt="">
        <!-- 你好啊！ -->
    </div>
</body>
</html>